<template>
  <form-item
      :form-datas = "formDatas"
      :form-item = "field"
      :parent-comp-type = "parentCompType"
  >
    <el-autocomplete
        :clearable = "field.preps['clearable']"
        :disabled = "field.preps['disabled']"
        :fetch-suggestions = "field.preps['fetchSuggestions']"
        :fit-input-width = "field.preps['fitInputWidth']"
        :hide-loading = "field.preps['hideLoading']"
        :highlight-first-item = "field.preps['highlightFirstItem']"
        :label = "field.preps['label']"
        :name = "field.preps['name']"
        :placeholder = "field.preps['placeholder']"
        :placement = "field.preps['placement']"
        :popper-class = "field.preps['popperClass']"
        :select-when-unmatched = "field.preps['selectWhenUnmatched']"
        :teleported = "field.preps['teleported']"
        :trigger-on-focus = "field.preps['triggerOnFocus']"
        :value-key = "field.preps['valueKey']"
        v-model = "starHorseDynamicForm[field.preps['name']]"
    />

  </form-item>
</template>

<script>
import FormItem from './form-item'

export default {
  name: 'autocomplete-item',
  components: {FormItem},
  props: {
    parentCompType: {type: Object},
    starHorseDynamicForm: {type: Object},
    field: {
      type: Object
    },
    formDatas: {type: Object}
  },
  data() {
    let formItem = {label: 'input', required: false}
    return {
      formItem,
      dataField: ''
    }
  },
  methods: {
    selectItem(data) {
      let _this = this
      _this.$emit('selectItem', data, _this.parentCompType)
    }
  }
}
</script>

<style scoped>
</style>